<script>
import { Message } from "element-ui";
import citys from "../js/citydata.js";
export default {
  data() {
    return {
      title: "新增门店",
      dialogFormVisible: false,
      loading: false,
      isRight:false,
      shopMessage:'',
      address: [],
      shop: {
        shopName: "",
        shopDescribe: "",
        shopImage: "",
        shopPhone: "",
        shopProvince: "",
        shopCity: "",
        shopDistrict: "",
        shopAddress: "",
        shopLongitude: "",
        shopLatitude: "",
      },
      shopName: "",
      shopPhone: "",
      date: ["", ""],
      radio: "",
      page: {
        // pageNum: 1,
        pageSize: 5,
        currentPage: 1,
        total: 100,
      },
      tableData: [],
      city: citys,
    };
  },
  methods: {
    //清除数据
    clear() {
      this.shop = {
        shopName: "",
        shopDescribe: "",
        shopImage: "",
        shopPhone: "",
        shopProvince: "",
        shopCity: "",
        shopDistrict: "",
        shopAddress: "",
        shopLongitude: "",
        shopLatitude: "",
      };
      this.address = [];
      this.dialogFormVisible = false;
    },
    get() {
      this.loading = true;
      this.$http
        .get("shop/querySearchShopList", {
          //pageNum=1&pageSize=10
          params: {
            keyword: this.shopName,
            phone: this.shopPhone,
            pageNum: this.page.currentPage,
            pageSize: this.page.pageSize,
            startTime: this.date[0],
            endTime: this.date[1],
            shopStatus: this.radio,
          },
        })
        .then((res) => {
          let data = res.data;
          console.log(res.data);
          if (data.status == 200) {
            //对数据复制
            this.tableData = data.data.list;
            this.page.total = data.data.total;
            Message({
              type: "success",
              message: "数据获取成功",
            });
            this.loading = false;
          } else {
            Message("数据获取失败");
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //添加shop
    add() {
      //
      this.$http
        .post("/shop/addShop", this.shop)
        .then((res) => {
          if (res.data.status == 200) {
            console.log(res.data);
            Message({
              type: "success",
              message: "添加成功！",
            });
            this.get();
          } else {
            Message({
              type: "error",
              message: "添加失败",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
      this.clear();
    },
    //获取经纬度
    getAddress() {
      if (this.address.length != 0) {
        //调用API接口
        this.$http
          .get("https://restapi.amap.com/v3/geocode/geo", {
            params: {
              key: "457886b5972a97e93fb9cdccebfd450f",
              address: this.address.join(""),
            },
          })
          .then((res) => {
            // console.log(res.data);
            // console.log(this.shop);
            if (res.data.status == 1) {
              let l = res.data.geocodes[0].location;
              this.shop.shopLatitude = l.split(",")[0];
              this.shop.shopLongitude = l.split(",")[1];
              console.log(this.shop);
            } else {
              Message({
                type: "error",
                message: "获取数据失败",
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else {
        Message({
          type: "error",
          message: "请选择地址",
        });
      }
    },

    //门店管理
    handleClick(val) {
      this.shopMessage = val
      this.isRight = true
    },
    //修改门店信息
    update() {
      //修改数据
      this.$http
        .post("/shop/modifyShop", this.shop)
        .then((res) => {
          if (res.data.status == 200) {
            Message({
              type: "success",
              message: "修改成功",
            });
          } else {
            Message({
              type: "error",
              message: "修改失败",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
      this.clear();
    },
    editCom(val) {
      //shezhi
      this.title = "修改信息";
      this.dialogFormVisible = true;
      // console.log(val);
      //获取信息
      this.address = [val.shopProvince, val.shopCity, val.shopDistrict];
      this.shop = val;
      console.log(this.address);
    },
    deleteCom() {},
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.get();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.get();
    },
  },
  watch: {
    date(newVal) {
      //   console.log(newVal);
      if (newVal != null) {
        this.date[0] = newVal[0];
        this.date[1] = newVal[1];
      } else {
        this.date = ["", ""];
      }
      this.get();
    },
    radio(newVal) {
      this.radio = newVal;
      console.log(this.radio);
      this.get();
    },
    //监听地址选择
    address() {
      this.shop.shopProvince = this.address[0];
      this.shop.shopCity = this.address[1];
      this.shop.shopDistrict = this.address[2];
    },
  },
  mounted() {
    this.get();
  },
};
</script>
<template>
  <div >
    <!-- 门店管理 -->
    <div v-if="!isRight">
    <router-view/>
    <div>
      <el-radio-group v-model="radio">
        <el-radio-button label="">全部门店</el-radio-button>
        <el-radio-button label="1">上架中</el-radio-button>
        <el-radio-button label="2">已下架</el-radio-button>
      </el-radio-group>
    </div>
    <div class="block">
      <span>门店名称:</span>
      <el-input style="width: 200px" v-model="shopName" clearable></el-input>
      <span>门店手机号:</span>
      <el-input style="width: 200px" v-model="shopPhone" clearable></el-input>
      <span>创建时间</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button type="primary" @click="get()" plain>搜索</el-button>
    </div>
    <el-row>
      <el-button
        type="primary"
        @click="(dialogFormVisible = true), (title = '新增门店')"
        plain
        >新增门店</el-button
      >
      <!-- 新增门店 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        @close="clear"
      >
        <el-form :model="shop">
          <el-form-item label="门店名称">
            <el-input v-model="shop.shopName" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="门店手机号">
            <el-input v-model="shop.shopPhone" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="门店所属地区">
            <div class="block">
              <el-cascader
                v-model="address"
                :options="city"
                style="width: 300px"
              ></el-cascader>
              <el-input
                v-model="shop.shopAddress"
                style="width: 300px"
                placeholder="请输入详细地址"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="门店坐标">
            <el-button @click="getAddress">获取坐标</el-button>
            <span v-show="shop.shopLatitude"
              >{{ shop.shopLatitude }},{{ shop.shopLongitude }}</span
            >
          </el-form-item>
          <el-form-item label="营业时间">
            <el-input
              v-model="shop.shopDescribe"
              style="width: 300px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clear">取 消</el-button>
          <el-button type="primary" @click="add" v-if="title == '新增门店'"
            >确 定</el-button
          >
          <el-button type="primary" @click="update" v-if="title == '修改信息'"
            >保 存</el-button
          >
        </div>
      </el-dialog>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      height="480"
      stripe
      :header-cell-style="{ background: '#1890FF', color: 'white' }"
    >
      <el-table-column fixed prop="shopName" label="门店"> </el-table-column>
      <el-table-column fixed prop="shopId" label="id"> </el-table-column>
      <el-table-column prop="shopPhone" label="门店手机号"> </el-table-column>
      <el-table-column prop="shopAddress" label="门店地址"> </el-table-column>
      <el-table-column prop="shopDescribe" label="营业时间"></el-table-column>
      <el-table-column
        prop="shopCommunitySort"
        label="关联小区"
      ></el-table-column>
      <el-table-column prop="shopOrderCount" label="订单总数"></el-table-column>
      <el-table-column prop="" label="提交方式"></el-table-column>
      <el-table-column prop="shopStatus" label="状态">
        <template slot-scope="scope">
          <span v-show="scope.row.shopStatus == 1">上架中</span>
          <span v-show="scope.row.shopStatus == 2">已下架</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            门店管理
          </el-button>
          <el-button @click="editCom(scope.row)" type="text" size="small">
            修改门店资料
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
    <!-- 门店管理详细信息 -->
     <div v-if="isRight">
      <el-button @click="isRight = false">返回</el-button>
      门店管理详细信息:
      {{ shopMessage }}
     </div>
  </div>
</template>

<style scoped>
span,
.el-button {
  margin: 5px 10px;
}
</style>